<!-- 页面：帖子详情页 -->
<template>
	<view class="post">
		<template v-if="JSON.stringify(tab) != '{}'">
			<view class="tab-menu">
				<template v-for="item in tab.list">
					<view
						v-if="item.switch"
						:class="tabPage == item.id ? 'for hover' : 'for'"
						@click="clickTab(item.id,item.name)">
						<text class="text">{{item.name}}</text>
						<view></view>
					</view>
				</template>
			</view>
			<view style="width: 100%;height: 90rpx;"></view>
		</template>
		<youran-diy
			:Config="configJson"
			v-if="diyComponentStatus"></youran-diy>
		<template v-if="tabPage == 1">
			<template v-if="JSON.stringify(content) != '{}'">
				<view class="__title H1">
					<template v-if="content.operations.diversifyImages.length">
						<template v-for="title in content.operations.diversifyImages">
							<template v-if="title.code == 'title'">
								<text :style="title.description">
									[{{title.name}}]
								</text>
							</template>
						</template>
					</template>
					<text v-if="content.title">{{content.title}}</text>
				</view>
				<!-- 自定义HTML -->
				<template v-if="pageConfig.hookAd.html_1">
					<mp-html
						:content="pageConfig.hookAd.html_1"
						:selectable="true"/>
				</template>
				<view
					v-if="!content.isAnonymous"
					class="user-info Flex"
					@click="$_To('user/user?uid=' + content.author.uid)">
					<view class="left">
						<view class="avatar">
							<image :src="content.author.avatar" mode="widthFix"></image>
						</view>
						<view
							:style="content.author.nicknameColor?'background:'+content.author.nicknameColor+';':'background: #C0C4CC;'"
							class="right-bottom">{{content.author.roleName[0]}}</view>
					</view>
					<view class="center">
						<view class="center-top">
							<view class="nickname H2">{{content.author.nickname}}</view>
						</view>
						<view class="center-bottom Flex">
							<text class="P" :style="content.author.nicknameColor?'color:'+content.author.nicknameColor+';':''">{{content.author.roleName}}</text>
							<text class="P">发表于{{content.createdTimeAgo}}</text>
						</view>
					</view>
					<view class="right Flex">
						<view class="button Flex">
							<text class="P">查看用户</text>
						</view>
					</view>
				</view>
				<!-- 匿名用户 -->
				<view
					v-if="content.isAnonymous"
					class="user-info Flex">
					<view class="left">
						<view class="avatar">
							<image :src="content.author.avatar" mode="widthFix"></image>
						</view>
					</view>
					<view
						class="center"
						style="display: flex;align-items: center;">
						匿名用户
					</view>
				</view>
				<!-- 自定义HTML -->
				<template v-if="pageConfig.hookAd.html_2">
					<mp-html
						:content="pageConfig.hookAd.html_2"
						:selectable="true"/>
				</template>
				<view class="content">
					<!-- HTML 格式 -->
					<template v-if="$_FresnsConfig().ContentFormat == 'html'">
						<mp-html
							:content="$_contentObservers(content.content)"
							:tag-style="pageConfig.contentTagStyle"
							:selectable="true"/>
					</template>
					<!-- markdown 格式 -->
					<template v-else>
						<mp-html
							:content="content.content"
							:tag-style="pageConfig.contentTagStyle"
							:markdown="true"/>
					</template>
					<!-- 内容小尾巴 -->
					<template v-if="contentLittleTail">
						<mp-html
							:content="contentLittleTail"/>
					</template>
					<!-- 自定义HTML -->
					<template v-if="pageConfig.hookAd.html_3">
						<mp-html
							:content="pageConfig.hookAd.html_3"
							:selectable="true"/>
					</template>
				</view>
				<view
					class="quotePost"
					v-if="content.quotedPost"
					@click="$_To('post/post?pid='+content.quotedPost.pid)">
					<text class="iconfont icon-yinyong"></text>
					<text class="quotePost-title">
						{{content.quotedPost.title?content.quotedPost.title:$_filterHtml(content.quotedPost.content)}}
					</text>
				</view>
				<!-- 附件 > 图片 -->
				<view class="files" v-if="content.files.images.length">
					<view class="files-title">
						<text class="iconfont icon-tupian"></text>
						<text>图片附件</text>
					</view>
					<view class="for">
						<view
							@click="$_picturePreview(index,content.files.images)"
							v-for="(item,index) in content.files.images"
							style="height: 125rpx;">
							<image :src="item.imageRatioUrl" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- 附件 > 视频 -->
				<view class="files" v-if="content.files.videos.length">
					<view class="files-title" style="background: #F56C6C;">
						<text class="iconfont icon-zhibo"></text>
						<text>视频附件</text>
					</view>
					<view class="video-for">
						<view
							class="video-for-box"
							@click="$_To('public/video?url=' + item.videoUrl)"
							v-for="item in content.files.videos">
							<view class="video-for-box-image">
								<image :src="item.videoPosterUrl" mode="widthFix"></image>
							</view>
							<view class="video-for-box-icon">
								<text class="iconfont icon-play"></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 附件 > 音频 -->
				<view class="files" v-if="content.files.audios.length">
					<view class="files-title" style="background: #67C23A;">
						<text class="iconfont icon-yuyin"></text>
						<text>音频附件</text>
					</view>
					<view
						class="audio-for"
						v-for="item in content.files.audios">
						<public-audio
							Css="width:350rpx;"
							:Url="item.audioUrl"></public-audio>
					</view>
				</view>
				<!-- 附件 > 文档 -->
				<view class="files" v-if="content.files.documents.length">
					<view class="files-title" style="background: #03A9F4;">
						<text class="iconfont icon-file"></text>
						<text>文档附件</text>
					</view>
					<view
						class="audio-for"
						v-for="item in content.files.documents">
						<view @click="clickDownfile(item)" style="text-align:center;border:1px solid #C0C6CC;width:300px;border-radius: 4px;line-height:30px;font-size:12px;position:relative;">
						<text style="float:left;margin-left: 15px;" class="iconfont icon-xiazai"></text>
						<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- 自定义HTML -->
				<template v-if="pageConfig.hookAd.html_4">
					<mp-html
						:content="pageConfig.hookAd.html_4"
						:selectable="true"/>
				</template>
				<view class="post-action-button">
					<template v-if="!content.interaction.likeStatus">
						<view class="for" @click="clickPostOperate('like')">
							<text class="iconfont icon-dianzan"></text>
							<text class="_text">{{content.interaction.likeName}}</text>
						</view>
					</template>
					<template v-if="content.interaction.likeStatus">
						<view style="background: #409EFF;" class="for" @click="clickPostOperate('like')">
							<text class="iconfont icon-dianzan" style="color: #FFF;"></text>
							<text class="_text" style="color: #FFF;">{{content.interaction.likeName}}</text>
						</view>
					</template>
					<template v-if="!content.interaction.followStatus">
						<view class="for" @click="clickPostOperate('follow')">
							<text class="iconfont icon-shoucang"></text>
							<text class="_text">{{content.interaction.followName}}</text>
						</view>
					</template>
					<template v-if="content.interaction.followStatus">
						<view style="background: #F56C6C;" class="for" @click="clickPostOperate('follow')">
							<text class="iconfont icon-shoucang" style="color: #FFF;"></text>
							<text class="_text" style="color: #FFF;">{{content.interaction.followName}}</text>
						</view>
					</template>
					<view class="for" @click="clickPostOperateCopy">
						<text class="iconfont icon-link"></text>
						<text class="_text">链接</text>
					</view>
					<view class="for" @click="clickShare">
						<text class="iconfont icon-fenxiang"></text>
						<text class="_text">分享</text>
					</view>
					<template v-if="JSON.stringify(reportPost) != '{}'">
						<view
							v-if="reportPost.onOff"
							class="for"
							@click="clickReport(Pid,reportPost.gid,'post')">
							<text class="iconfont icon-tanhao"></text>
							<text class="_text">举报</text>
						</view>
					</template>
				</view>
				<view class="post-category">
					<template v-if="content.hashtags.length">
						<view
							@click="$_To('hashtag/hashtag?hid='+item_HuaTi.hid)"
							class="_hashtags"
							v-for="item_HuaTi in content.hashtags">
							#{{item_HuaTi.hname}}#
						</view>
					</template>
				</view>
				<view
					@click="$_To('group/group?gid=' + content.group.gid)"
					v-if="content.group"
					class="post-category-group">
					<view class="_icon" v-if="content.group.cover">
						<image :src="content.group.cover" mode="widthFix"></image>
					</view>
					<view class="_right-info">
						<view class="_right-info-box">
							<view class="_right-info-title">{{content.group.gname}}</view>
							<view class="_right-info-abstract">
								<text>{{content.group.postCount}}帖子</text><text>{{content.group.commentCount}}评论</text>
							</view>
						</view>
						<view class="_right-info-button">进入小组</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content:space-between;margin-bottom: 25rpx;">
					<view
						@click="clickMap(content.location.latitude,content.location.longitude)"
						class="map"
						v-if="content.location.poi">
						<text class="iconfont icon-dingwei1"></text>
						<text style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{content.location.poi}}</text>
					</view>
					<view
						v-if="content.location.poiId"
						style="flex-shrink: 0;"
						class="map">
						<text class="iconfont icon-yanchu1"></text>
						<text>{{content.location.poiId}}</text>
					</view>
				</view>
				<view class="editing-and-deleting" v-if="content.editControls.canEdit || content.editControls.canDelete || content.manages.length">
					<template v-if="content.manages.length">
						<view
							v-for="item in content.manages"
							@click="$_To(`extensionsPlugin/${item.fskey}?type=post&scene=manage&uid=${content.author.uid}&pid=${content.pid}`)">
							{{item.name}}
						</view>
					</template>
					<view
						@click="clickEdit"
						v-if="content.editControls.canEdit">编辑</view>
					<view
						@click="clickDelete"
						v-if="content.editControls.canDelete">删除</view>
				</view>
				<view class="like-follow-list" v-if="content.likeCount || content.followCount">
					<view
						@click="$_To('post/likeList?pid=' + Pid)"
						class="for"
						v-if="content.likeCount">
						<view class="left">
							<view v-for="item in listLike">
								<image :src="item.avatar" mode="widthFix"></image>
							</view>
						</view>
						<view class="right P">
							{{content.likeCount}} 个{{content.interaction.likeName}}
						</view>
					</view>
					
					<view
						@click="$_To('post/followList?pid=' + Pid)"
						class="for"
						v-if="content.followCount">
						<view class="left">
							<view v-for="item in listFollow">
								<image :src="item.avatar" mode="widthFix"></image>
							</view>
						</view>
						<view class="right P">
							{{content.followCount}} 个{{content.interaction.followName}}
						</view>
					</view>
				</view>
				<!-- 自定义HTML -->
				<template v-if="pageConfig.hookAd.html_5">
					<mp-html
						:content="pageConfig.hookAd.html_5"
						:selectable="true"/>
				</template>
				<view class="comment-info Flex">
					<view class="left Flex">
						<view class="Xian" style="background: #409EFF;"></view>
						<view>评论</view>
					</view>
					<view class="right Flex">
						<text class="P">{{content.commentCount?content.commentCount+'条评论':''}}</text>
					</view>
				</view>
				<view class="quick-comments" v-if="pageConfig.quickComments.length">
					<view
						@click="clickQuickComments(item)"
						class="_for"
						v-for="item in pageConfig.quickComments">
						<text class="iconfont icon-yinyong"></text>
						<text class="text">{{item}}</text>
					</view>
				</view>
				<list-comment
					v-for="item in listComment"
					:Item="item"
					ref="refListComment"></list-comment>
				<public-comment-box
					:Cid="Cid"
					:Pid="Pid"></public-comment-box>
			</template>
			<template v-else>
				<view class="skeleton-screen">
					<view class="_title loading-css"></view>
					<view class="_info">
						<view class="loading-css"></view>
						<view class="loading-css"></view>
					</view>
					<view class="_content loading-css"></view>
					<view class="_post-action-button">
						<view class="loading-css"></view>
						<view class="loading-css"></view>
						<view class="loading-css"></view>
						<view class="loading-css"></view>
						<view class="loading-css"></view>
					</view>
					<view class="all-box">
						<view class="loading-css"></view>
						<view class="loading-css"></view>
						<view class="loading-css"></view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:{},
				tabPage:1,
				diyComponentStatus:false,
				content:{},
				pageConfig:{},
				listLike:[],
				listFollow:[],
				listComment:[],
				Pid:"",
				Cid:"",
				reportPost:{},//帖子举报小组
				contentLittleTail:"",//内容小尾巴
				configJson:""
			}
		},
		mounted(){
			uni.$on('commentListRenew',() => {
				this.$refs.refListComment[0].getList()
			})
		},
		onUnload() {
			uni.$off('commentListRenew')
		},
		onLoad(e) {
			this.Pid = e.pid;
			// 据说是二维码什么的用到...我个人不太理解，回头在验证
			// #ifdef MP-WEIXIN
			if (e.scene){
				const scene = decodeURIComponent(e.scene)
				this.Pid = scene.split('=')[1]
			}
			// #endif
			uni.request({
				url:this.$_Config() + "post.json",
				method:'GET',
				success: (res) => {
					if(res.data.tab.switch){
						this.tab = res.data.tab;
					}
					this.pageConfig = res.data;
					this.getConfig();
				}
			})
		},
		methods: {
			getConfig(){
				uni.request({
					url:this.$_Config() + "Config.json",
					method:'GET',
					success: (res) => {
						this.reportPost = res.data.reportPost;
						this.contentLittleTail = res.data.contentLittleTail;
						// 正文内容
						this.getContent();
					}
				})
			},
			// 正文内容
			getContent(){
				this.$_Request(
					"GET","/api/v2/post/"+this.Pid+"/detail", {},
					(res) => {
						if(res.data.code == 0){
							this.content = res.data.data.detail;
							// 点赞列表
							this.getLikeList();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
							setTimeout(()=>{
								uni.navigateBack()
							},1000);
						}
					}
				)
			},
			// 点赞列表
			getLikeList(){
				// 请求，点赞，列表
				this.$_Request(
					"GET","/api/v2/post/" + this.Pid + "/interaction/likers",
					{
						"whitelistKeys":"avatar",
						"pageSize": 8
					},
					(res) => {
						this.listLike = res.data.data.list;
						// 收藏列表
						this.getFollowList();
					}
				)
			},
			// 收藏列表
			getFollowList(){
				this.$_Request(
					"GET","/api/v2/post/" + this.Pid + "/interaction/followers",
					{
						"whitelistKeys":"avatar",
						"pageSize": 8
					},
					(res) => {
						this.listFollow = res.data.data.list;
						this.getCommentList();
					}
				)
			},
			// 评论列表
			getCommentList(){
				this.listComment = [
					{
						"order": 400,
						"css": "padding:0 25rpx 0 25rpx;",
						"page": true,
						"replyToComment": false,
						"query": {
							"mapId": "",
							"mapLng": "",
							"mapLat": "",
							"uidOrUsername": "",
							"pid": this.Pid,
							"cid": "",
							"hid": "",
							"gid": "",
							"includeSubgroups": 1,
							"sticky": "",
							"allDigest": "",
							"digestState": "",
							"contentType": "",
							"createdDays": "",
							"createdDate": "",
							"createdDateGt": "",
							"createdDateLt": "",
							"likeCountGt": "",
							"likeCountLt": "",
							"followCountGt": "",
							"followCountLt": "",
							"blockCountGt": "",
							"blockCountLt": "",
							"commentCountGt": "",
							"commentCountLt": "",
							"orderType": "",
							"orderDirection": "",
							"pageSize": 15
						}
					}
				]
			},
			// 点击，操作帖子，点赞、收藏等
			clickPostOperate(e){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":e,
						"markType":"post",
						"fsid":this.Pid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							// 正文内容
							this.getContent();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 复制链接按钮
			clickPostOperateCopy(){
				uni.setClipboardData({
					data: this.content.url,
					success: (res) => {
						uni.showToast({
							title: "已复制，请粘贴",
							icon: "none",
							duration: 1000
						});
					}
				});
			},
			// 打开位置、地图按钮
			clickMap(latitude,longitude){
				let a = parseFloat(latitude),
					b = parseFloat(longitude);
				uni.openLocation({
					latitude: a,
					longitude: b,
					success: (res) => {}
				});
			},
			// 删除按钮
			clickDelete(){
				uni.showModal({
					title: "注意",
					content: "是否删除本帖？不可恢复哟。",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.$_Request(
								"DELETE","/api/v2/post/" + this.Pid,{},
								(ref) => {
									uni.hideLoading();
									if(ref.data.code == 0){
										this.$store.commit('mutationsStatelistStatus',true)
										uni.navigateBack();
									}else{
										uni.showToast({
											title:ref.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							)
						}
					}
				});
			},
			// 编辑按钮
			clickEdit(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/editor/post/generate/" + this.Pid, {},
					(res) => {
						uni.hideLoading();
						if(res.data.data.editControls){
							this.$_To('editor/editor?type=edit&id='+res.data.data.detail.id)
						}else{
							uni.showToast({
								title:"此贴不能编辑",
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 小程序分享按钮
			clickShare(){
				// #ifdef MP-WEIXIN
				uni.showToast({
					title: "点击右上角“...”分享",
					icon: "none",
					duration: 1000
				});
				// #endif
				
				// #ifdef APP-PLUS
				plus.share.sendWithSystem({ content: this.content.title?this.content.title:this.$_filterHtml(this.content.content), href: this.content.url}, function () {
					console.log('分享成功');
				}, function (e) {
					console.log('分享失败：' + JSON.stringify(e));
				});
				// #endif
			},
			// 举报按钮
			clickReport(pid,gid,type){
				this.$_To(`editor/report?pid=${pid}&gid=${gid}&type=${type}`)
			},
			// 快速回复
			clickQuickComments(item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/editor/comment/quick-publish",
					{
						"commentPid":this.Pid,
						"content":item
					},
					(res) => {
						if(res.data.code == 0){
							uni.hideLoading();
							this.$refs.refListComment[0].getList()
						}else{
							uni.showToast({
								title: res.data.message,
								duration: 1000
							});
						}
					}
				)
			},
			// 下载文件附件
			clickDownfile(item){
				if (!this.$_loginOrNot()) {
					this.$_notLoggedInPrompt()
					return
				}
				uni.showLoading();
				this.$_Request(
					"GET", "/api/v2/common/file/" + item.fid + "/link",
					{
						"type": "post",
						"fsid": this.Pid
					},
					(res) => {
						uni.hideLoading();
						if (res.data.code == 0) {
							// 正文内容
							uni.downloadFile({
								url: res.data.data.originalUrl, // 下载url
								success: (res) => {
									// 下载完成后转发
									// #ifdef MP-WEIXIN
									uni.shareFileMessage({
										filePath: res.tempFilePath,
										fileName: item.name,
										success: (res) => {
											uni.showToast({
												title: "下载成功",
												icon: "none",
												duration: 1000
											});
										},
										fail: console.error,
									})
									// #endif
									// #ifndef MP-WEIXIN
									uni.openDocument({
										filePath: res.tempFilePath,
										success(data) {
											
										},
									});
									// #endif
								},
								fail: console.error,
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 点击切换卡
			clickTab(id,name){
				this.diyComponentStatus = false;
				this.tabPage = id;
				if(id == 1){
					this.configJson = 'post.json';
					this.content = {};
					this.getContent()
				}
				if(id == 2){
					this.configJson = 'post_2.json';
				}
				if(id == 3){
					this.configJson = 'post_3.json';
				}
				if(id == 4){
					this.configJson = 'post_4.json';
				}
				if(id == 5){
					this.configJson = 'post_5.json';
				}
				setTimeout(() => {
					this.diyComponentStatus = true;
				}, 100);
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.content.title?this.content.title:this.$_filterHtml(this.content.content),
				path: '/pages/post/post?pid=' + this.Pid
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.content.title?this.content.title:this.$_filterHtml(this.content.content),
				path: '/pages/post/post?pid=' + this.Pid
			}
		},
		// 下拉，加载
		onPullDownRefresh() {
			this.content = {};
			this.tabPage = 1;
			this.diyComponentStatus = false;
			setTimeout(() => {
				this.getContent()
				uni.stopPullDownRefresh();
			}, 100);
		},
	}
</script>

<style lang="scss">
.post{
	.tab-menu{
		width: 750rpx;
		height: 90rpx;
		background: $BeiJingSe;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top:var(-window-top);
		left: 0;
		z-index: 999;
		.for{
			width: 150rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			position: relative;
			.text{
				font-size: 32rpx;
				line-height: 32rpx;
				color: $ZhanWeiSe;
			}
		}
		.hover{
			.text{
				color: $YuanSe;
			}
			view{
				width: 40rpx;
				height: 10rpx;
				background: $HuangSe;
				border-radius: 100rpx;
				position: absolute;
				left: 55rpx;
				bottom: 15rpx;
			}
		}
	}
	.__title{
		margin: 25rpx 25rpx 0 25rpx;
	}
	.user-info{
		padding: 25rpx 25rpx 0 25rpx;
		.left{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			position: relative;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background: $BeiJingSe;
			}
			.right-bottom{
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				border: 1px solid #FFF;
				color: #FFF;
				font-size: 18rpx;
				line-height: 18rpx;
				border-radius: 100rpx;
			}
		}
		.center{
			flex: 1;
			height: 80rpx;
			overflow: hidden;
			margin: 0 20rpx;
			.center-top{
				align-items: center;
				padding-top: 5rpx;
				.nickname{
					line-height: 32rpx;
				}
				.P{
					padding-left: 15rpx;
				}
			}
			.center-bottom{
				margin-top: 15rpx;
				text{
					line-height: 22rpx;
					padding-right: 15rpx;
				}
			}
		}
		.right{
			height: 80rpx;
			align-items: center;
			.button{
				align-items: center;
				border: 1rpx solid $JuHuang;
				border-radius: 100rpx;
				height: 50rpx;
				padding: 0 20rpx;
				text{
					color: $JuHuang;
					line-height: 22rpx;
				}
				.iconfont{
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}
		}
	}
	.content{
		padding: 25rpx 25rpx 0 25rpx;
	}
	.quotePost{
		background: $BeiJingSe;
		margin: 0 25rpx 25rpx 25rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 25rpx;
		.icon-yinyong{
			flex-shrink: 0;
			color: $BianKuangSe;
			font-size: 70rpx;
			line-height: 70rpx;
		}
		.quotePost-title{
			flex: 1;
			margin-left: 10rpx;
			display: -webkit-box;
			/*!autoprefixer:off*/
			-webkit-box-orient: vertical;
			/*autoprefixer:on*/
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
	.files{
		.files-title{
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $LanSe;
			height: 40rpx;
			border-radius: 100rpx;
			margin: 25rpx auto auto auto;
			text{
				font-size: 22rpx;
				line-height: 22rpx;
				color: #FFF;
				text-shadow: 0 0 1rpx #000;
			}
			.iconfont{
				font-size: 28rpx;
				line-height: 28rpx;
				margin-right: 5rpx;
			}
		}
		.for{
			margin: 25rpx 25rpx 0 25rpx;
			display: flex;
			flex-wrap: wrap;
			view{
				width: 226.666666rpx;
				height: 200rpx;
				overflow: hidden;
				margin-top: 10rpx;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
				border-radius: 10rpx;
				margin: 10rpx 10rpx 0 0;
			}
		}
		.video-for{
			margin: 25rpx 25rpx 0 25rpx;
			display: flex;
			flex-wrap: wrap;
			.video-for-box{
				width: 226.666666rpx;
				height: 200rpx;
				overflow: hidden;
				margin-top: 10rpx;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
				border-radius: 10rpx;
				position: relative;
				.video-for-box-image{
					width: 226.666666rpx;
					height: 200rpx;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.video-for-box-icon{
					width: 226.666666rpx;
					height: 200rpx;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color:rgba(0,0,0,0.6);
					.icon-play{
						font-size: 80rpx;
						line-height: 80rpx;
						color: #FFF;
					}
				}
			}
			.video-for-box:nth-child(2),.video-for-box:nth-child(5),.video-for-box:nth-child(8){
				margin: 10rpx 10rpx 0 10rpx;
			}
		}
		.audio-for{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 25rpx;
		}
	}
	.post-action-button{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 25rpx;
		.for{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			margin: 0 12.5rpx;
			width: 100rpx;
			height: 100rpx;
			background: $BeiJingSe;
			border-radius: 100rpx;
			text{
				color: $ZhanWeiSe;
			}
			.iconfont{
				font-size: 40rpx;
				line-height: 40rpx;
			}
			._text{
				font-size: 16rpx;
				line-height: 16rpx;
				padding-top: 5rpx;
			}
		}
	}
	.post-category{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 0 0 25rpx;
		._hashtags{
			display: flex;
			align-items: center;
			height: 50rpx;
			background: $BeiJingSe;
			border-radius: 100rpx;
			margin: 25rpx 25rpx 0 0;
			font-size: 28rpx;
			line-height: 28rpx;
			padding: 0 20rpx;
		}
	}
	.post-category-group{
		background: $BeiJingSe;
		margin: 25rpx 25rpx 0 25rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 25rpx;
		._icon{
			width: 85rpx;
			height: 85rpx;
			border-radius: 10rpx;
			overflow: hidden;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		._right-info{
			height: 85rpx;
			flex: 1;
			display: flex;
			align-items: center;
			._right-info-box{
				flex: 1;
				._right-info-title{
					font-size: 28rpx;
					line-height: 28rpx;
					padding-top: 10rpx;
				}
				._right-info-abstract{
					text{
						font-size: 22rpx;
						line-height: 22rpx;
						color: $ZhanWeiSe;
						padding-right: 15rpx;
					}
				}
			}
			._right-info-button{
				flex-shrink: 0;
				font-size: 28rpx;
				line-height: 28rpx;
				color: $ShenLanSe;
				border-left: 1rpx solid $ShenLanSe;
				padding-left: 15rpx;
			}
		}
	}
	.map{
		display: flex;
		align-items: center;
		margin: 25rpx 25rpx 0 25rpx;
		text{
			color: $ZhanWeiSe;
			font-size: 22rpx;
			line-height: 22rpx;
		}
		.iconfont{
			font-size: 26rpx;
			line-height: 26rpx;
		}
	}
	.editing-and-deleting{
		border-top: 1rpx solid $BeiJingSe;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 0 25rpx 25rpx;
		view{
			font-size: 22rpx;
			line-height: 22rpx;
			background: $ZhanWeiSe;
			margin: 25rpx 25rpx 0 0;
			padding: 15rpx 25rpx;
			border-radius: 10rpx;
			color: #FFF;
		}
	}
	.like-follow-list{
		border-top: 25rpx solid $BeiJingSe;
		.for{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid $BeiJingSe;
			padding: 25rpx;
			.left{
				flex: 1;
				height: 60rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				view{
					width: 60rpx;
					height: 60rpx;
					border-radius: 100%;
					border: 1rpx solid #FFF;
					overflow: hidden;
				}
			}
			.right{
				height: 60rpx;
				display: flex;
				align-items: center;
				border-radius: 100rpx;
				padding: 0 20rpx;
				flex-shrink: 0;
				.iconfont{
					font-size: 32rpx;
					line-height: 32rpx;
					margin-right: 5rpx;
					color: #FFF;
				}
				.Zi{
					font-size: 28rpx;
					line-height: 28rpx;
					color: #FFF;
				}
			}
		}
	}
	.comment-info{
		align-items: center;
		padding: 25rpx;
		border-top: 25rpx solid $BeiJingSe;
		border-bottom: 1rpx solid $BeiJingSe;
		.left{
			align-items: center;
			.Xian{
				width: 10rpx;
				height: 28rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}
		}
		.right{
			flex: 1;
			align-items: center;
			justify-content: flex-end;
			.P{
				padding-left: 15rpx;
			}
		}
	}
	.quick-comments{
		margin: 25rpx 25rpx 0 25rpx;
		padding: 25rpx;
		background: $BeiJingSe;
		._for{
			display: flex;
			align-items: center;
			display: -webkit-box;
			/*!autoprefixer:off*/
			-webkit-box-orient: vertical;
			/*autoprefixer:on*/
			-webkit-line-clamp: 1;
			overflow: hidden;
			.iconfont{
				font-size: 22rpx;
				line-height: 22px;
				color: $ZhanWeiSe;
				padding-right: 10rpx;
			}
			.text{
				line-height: 28rpx;
				font-size: 28rpx;
			}
		}
	}
}
.skeleton-screen{
	padding: 25rpx;
	._title{
		width: 100%;
		height: 60rpx;
	}
	._info{
		margin-top: 25rpx;
		height: 80rpx;
		display: flex;
		view:nth-child(1){
			width: 80rpx;
			height: 80rpx;
			margin-right: 25rpx;
			border-radius: 100%;
		}
		view:nth-child(2){
			flex: 1;
			height: 80rpx;
		}
	}
	._content{
		margin-top: 25rpx;
		height: 600rpx;
	}
	._post-action-button{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		margin-top: 25rpx;
		view{
			margin: 0 12.5rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
	}
	.all-box{
		view{
			width: 100%;
			height: 100rpx;
			margin-top: 25rpx;
		}
	}
}
</style>
